<template>
    <div>
      <div class="empty" v-if="hospitalList.length == 0">
        <img :src="consultationEmpty" width="144px" height="136px">
        <div style="font-size: 15px;margin-top: 10px;color:#b3b3b3">暂无关注医院，请扫码医生二维码进行关注</div>
      </div>
      <div v-else>
        <focus-hospital-item v-for="hospital in hospitalList" :key="hospital.orgId.value" :hospitalDetail="hospital" @click.native="toHospital(hospital)"></focus-hospital-item>
      </div>
    </div>
</template>
 <script>
import { mapGetters } from "vuex";
import FocusHospitalItem from "./FocusHospitalItem.vue";
import imgMap from "../../../static/js/imgmap.js";
export default {
  data() {
    return {
      hospitalList: []
    };
  },

  components: {
    focusHospitalItem: FocusHospitalItem
  },
  computed: {
    ...mapGetters(["loginData"]),
    consultationEmpty() {
      return imgMap.consultationEmpty;
    }
  },
  methods: {
    toHospital(hospital) {
      this.$router.push({
        path: "home",
        query: {
          orgId: hospital.orgId.value,
          focusEnter: true,
          orgNames: hospital.orgNames
        }
      });
    },

    requestHospitalList() {
      let vm = this;
      const request = {
        busiType: 1000100103,
        favType: 1014102,
        userId: this.loginData.userObj.userId.value
      };
      this.$store
        .dispatch("myFavList", request)
        .then(data => {
          if (data.orgList) {
            for (let i = 0; i < data.orgList.length; i++) {
              vm.hospitalList.push(data.orgList[i]);
            }
          }
        })
        .catch(error => {
          this.$toast(error.message);
        });
    }
  },

  created() {
    const userInfo = this.loginData.userObj;
    if (userInfo) {
      this.requestHospitalList();
    } else {
      this.myUtils.wxLogin();
    }
  }
};
</script>

<style scoped>
.empty {
  padding: 50px 40px;
  text-align: center;
}
</style>
